import React, { Fragment, useState, useEffect } from 'react';
import {
  Col,
  Table,
  Select,
  Button,
  Row,
  Input,
  DatePicker,
  Pagination,
} from 'antd';
import { Resizable } from 'react-resizable';
import './new.less';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import { ConfigProvider } from 'antd';
import axios from 'axios';
export default function Index() {
  const { RangePicker } = DatePicker;
  const handleChange = (value) => {
    // setstatus(value)
    getNews(value);
  };
  const column = [
    {
      title: '序号',
      width: '18%',
      render: (text, record, index) => `${index + 1}`,
    },
    {
      title: '消息名称',
      dataIndex: 'messagename',
      width: 100,
      ellipsis: true,
      key: 'messagename',
    },
    {
      title: '消息时间',
      dataIndex: 'remindtime',
      width: 100,
      ellipsis: true,
      key: 'remindtime',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      ellipsis: true,
      render: (_) => {
        return _ == false ? '未读' : '已读';
      },
    },
  ];
  const [newlist, setnewlist] = useState([]);
  const [dcolumns, setDcolumns] = useState([]);
  const [components, setComponents] = useState({});
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [status, setstatus] = useState(false);
  const [total, settotal] = useState(0);
  useEffect(() => {
    getNews();
    setDcolumns(column),
      setComponents({
        header: {
          cell: ResizeableTitle,
        },
      });
  }, []);
  const onChange = (selectedRowKeys) => {
    setSelectedRowKeys(selectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onChange,
  };
  const Y = new Date().getFullYear();
  const M = (new Date().getMonth() + 1 + '').padStart(2, '0');
  const D = (new Date().getDate() + '').padStart(2, '0');
  const year = Y + '-' + M + '-' + D;
  const getNews = async (value = false, start = '2023-01-01', end = year) => {
    let { data } = await axios.get(
      `http://127.0.0.1:7777/news/message/?start=${start}&end=${end}`,
    );
    if (status == value) {
      let news = data.messageData.filter((item) => item.status == false);
      setnewlist(news);
      settotal(news.length);
    } else if (value == true) {
      let news = data.messageData.filter((item) => item.status == true);
      setnewlist(news);
      settotal(news.length);
    } else {
      setnewlist(data.messageData);
      settotal(data.messageData.length);
    }
  };
  // 拖拽
  const ResizeableTitle = (props) => {
    const { onResize, width = 100, ...restProps } = props;
    if (!width) {
      return <th {...restProps} />;
    }

    return (
      <Resizable width={width} height={0} onResize={onResize}>
        <th {...restProps} />
      </Resizable>
    );
  };
  const handleResize =
    (index) =>
    (e, { size }) => {
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      };
      setDcolumns(nextColumns);
    };
  const columns = dcolumns.map((col, index) => ({
    ...col,
    onHeaderCell: (column) => ({
      width: col.width * 1 || 100,
      onResize: handleResize(index),
    }),
  }));
  const putStatus = async () => {
    let _id = selectedRowKeys[0];
    let obj = {
      id: _id,
      status: true,
    };
    axios.put('http://127.0.0.1:7777/news/messageupt', obj);
    await getNews(false);
    setSelectedRowKeys([]);
  };
  const onChangeDate = (date, dateString) => {
    let start = dateString[0];
    let end = dateString[1];
    getNews(false, start, end);
  };
  return (
    <Fragment>
      <div>
        <div className="usermenu">
          <Button className="user_btn" onClick={() => putStatus()}>
            标记为已读
          </Button>
        </div>
        <Row className="new_raw">
          <span className="new_name">消息名称：</span>
          <Col span={3}>
            <Input />
          </Col>
          <span className="new_name">提醒日期：</span>
          <Col span={3}>
            <ConfigProvider locale={zh_CN}>
              <RangePicker onChange={onChangeDate} />
            </ConfigProvider>
          </Col>
          <span className="new_name">消息状态：</span>
          <Col span={3}>
            <Select
              defaultValue="未读"
              style={{
                width: 120,
              }}
              onChange={handleChange}
              options={[
                {
                  value: false,
                  label: '未读',
                },
                {
                  value: true,
                  label: '已读',
                },
                {
                  value: 'all',
                  label: '全部',
                },
              ]}
            />
          </Col>
          <span className="new_name"></span>
          <Col span={4}>
            <Button className="sel">查询</Button>
          </Col>
        </Row>
        <br />
        <Table
          components={components}
          pagination={false}
          bordered
          rowKey={(record) => record._id}
          rowSelection={rowSelection}
          scroll={{
            y: '380px',
          }}
          columns={columns}
          dataSource={newlist}
        />
        <div className="home_fy">
          <div className="home_fy_left">
            <svg
              t="1675319740940"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="7074"
              width="20"
              height="20"
            >
              <path
                d="M872.533 819.627a34.133 34.133 0 0 1-48.213 48.213L492.373 535.893a34.133 34.133 0 0 1 0-48.213L824.32 155.733a34.133 34.133 0 0 1 48.213 48.214L564.907 512z m-341.333 0a34.133 34.133 0 0 1-48.213 48.213l-331.52-331.52a34.133 34.133 0 0 1 0-48.213L483.413 156.16a34.133 34.133 0 0 1 48.214 48.213L223.573 512z"
                fill="#333333"
                p-id="7075"
              ></path>
            </svg>
            <svg
              t="1675319795515"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="7214"
              width="20"
              height="20"
            >
              <path
                d="M677.391515 873.916768c-7.86101 0-15.618586-2.999596-21.617778-8.895354L324.473535 533.721212c-11.998384-11.894949-11.998384-31.340606 0-43.235555L655.670303 159.288889c5.999192-5.999192 13.756768-8.895354 21.617778-8.895354 7.757576 0 15.618586 2.999596 21.617778 8.895354 11.894949 11.894949 11.894949 31.237172 0 43.235555L389.223434 512.103434 698.905859 821.785859c11.894949 11.998384 11.894949 31.340606 0 43.235555-5.895758 5.895758-13.756768 8.895354-21.514344 8.895354z m0 0"
                fill="#666666"
                p-id="7215"
              ></path>
            </svg>
            <svg
              t="1675319856049"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="7882"
              width="20"
              height="20"
            >
              <path
                d="M531.185456 943.532317c0 8.899694-6.493901 16.114003-14.503319 16.114003l-9.364275 0c-8.010441 0-14.504342-7.214309-14.504342-16.114003L492.81352 80.46666c0-8.898671 6.493901-16.114003 14.504342-16.114003l9.364275 0c8.009418 0 14.503319 7.215332 14.503319 16.114003L531.185456 943.532317z"
                p-id="7883"
              ></path>
            </svg>
            <span style={{ marginRight: '10px' }}>第</span>
            <input style={{ marginRight: '10px' }} type="text" value="1" />
            <span style={{ marginRight: '5px' }}>页，共</span>
            <span style={{ marginRight: '5px' }}>1</span>
            <span>页</span>
            <svg
              t="1675319856049"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="7882"
              width="20"
              height="20"
            >
              <path
                d="M531.185456 943.532317c0 8.899694-6.493901 16.114003-14.503319 16.114003l-9.364275 0c-8.010441 0-14.504342-7.214309-14.504342-16.114003L492.81352 80.46666c0-8.898671 6.493901-16.114003 14.504342-16.114003l9.364275 0c8.009418 0 14.503319 7.215332 14.503319 16.114003L531.185456 943.532317z"
                p-id="7883"
              ></path>
            </svg>
            <svg
              t="1675320084570"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="11159"
              width="20"
              height="20"
            >
              <path
                d="M151.467 204.373a34.133 34.133 0 1 1 48.213-48.213l331.947 331.947a34.133 34.133 0 0 1 0 48.213L199.68 867.84a34.133 34.133 0 1 1-48.213-48.213L459.093 512z m341.333 0a34.133 34.133 0 0 1 48.213-48.213L872.96 488.107a34.133 34.133 0 0 1 0 48.213L541.013 868.267a34.133 34.133 0 0 1-48.213-48.214L800.427 512z"
                fill="#333333"
                p-id="11160"
              ></path>
            </svg>
            <svg
              t="1675320111791"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="12072"
              width="20"
              height="20"
            >
              <path
                d="M386.640017 196.405191 687.536947 487.723004c13.840827 13.408717 13.840827 35.135036 0 48.543753s-36.293132 13.408717-50.156485 0L336.483532 244.948944c-13.840827-13.408717-13.840827-35.135036 0-48.543753S372.777687 182.996474 386.640017 196.405191z"
                fill="#879196"
                p-id="12073"
              ></path>
              <path
                d="M336.483532 779.073583l300.895906-291.351603c13.863354-13.408717 36.316683-13.408717 50.156485 0 13.840827 13.408717 13.840827 35.135036 0 48.543753L386.640017 827.617336c-13.863354 13.408717-36.316683 13.408717-50.156485 0S322.642705 792.437246 336.483532 779.073583z"
                fill="#879196"
                p-id="12074"
              ></path>
            </svg>
          </div>
          <div className="home_fy_right">
            显示
            <span>1-{total}</span>
            条，共<span>{total}</span>条
          </div>
        </div>
      </div>
    </Fragment>
  );
}
